<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>注册页面</title>
</head>
<body>
    <div id="app">

        <div class="container">

            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <span>{{ message }}</span>
                    <form>
                        <div class="form-group">
                            <label for="nickname">昵称</label>
                            <input type="text" class="form-control" id="nickname" placeholder="请输入昵称" v-model="user.username">
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码" v-model="user.password">
                        </div>

                        <div class="form-group">
                            <label for="code">验证码</label>
                            <input type="text" class="form-control" id="code" placeholder="请输入验证码" v-model="code">
                        </div>
                        <img onclick="this.src=this.src+'?d='+new Date()*1" src="/user/defaultKaptcha">
                        <button type="button" class="btn btn-success" @click="saveUser">注册</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                        <button type="button" class="btn btn-info" @click="toLogin">去登录</button>
                    </form>
                </div>
            </div>

        </div>

    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            user:{},
            code:"",
            message:"",
        },
        methods:{
            saveUser(){
                let _this = this;
                if (_this.user.username==null){
                    alert("用户名不能为空！");
                    return;
                }
                if (_this.user.password==null){
                    alert("密码不能为空！");
                    return;
                }

                axios.post("http://localhost:9999/user/check?code="+_this.code,_this.user).then(function (response) {
                    if (response.data.flag){
                        alert(response.data.message);
                        _this.toLogin();
                    }else{
                        _this.message = response.data.message;
                    }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            toLogin(){
                location.href = "login.html";
            }
        },
    });
</script>
